<template>
  <div style="text-align: center;">

    <!-- 布局 ：居中 -->
    <van-row>
  <van-col span="8"></van-col>
  <van-col span="8">    <!-- 头像 -->
    <van-image round show-error
    width="80"
     height="80"
    :src="this.userIcon"/>
  <!-- 名字 -->
  <h3 v-if="la">{{this.userName}}</h3>
  
  <router-link to="/UserUploadMusic">上传发布音乐</router-link>

  </van-col>
  <van-col span="8"></van-col>
</van-row>


    <!-- 应用 -->
    <van-tabs v-model="active">
      
      <van-tab title="播放列表">
        <MusicPlayList></MusicPlayList>
      </van-tab>
      <van-tab title="喜好分析">
        <LikeAnalysis></LikeAnalysis>
      </van-tab>
      <van-tab title="我的作品">
        <myproduction></myproduction>
      </van-tab>

  
      <van-tab title="收藏夹" >
        <UserCollect></UserCollect>
      </van-tab>
  <!-- <van-tab title="评论列表">评论列表</van-tab> -->
</van-tabs>
</div>
</template>

<script>
import UserAPI  from '@/api/UserAPI';
import UserCollect from '@/views/User/collect/UserCollect.vue'
import MusicPlayList from '@/views/Music/MusicPlayList.vue';
import Myproduction from '../production/Myproduction.vue';
import LikeAnalysis from './LikeAnalysis.vue';
export default {
 name: 'UserInfo',
 components: {
    UserCollect,
    MusicPlayList,
    Myproduction,
    LikeAnalysis
},
 created(){
  // var getuserId=localStorage.getItem('userId')
   this.userInfo()
 },
 data() {
  return {
    userDTO: {
      userId:'',
      userName: '游客',
      userIcon: '',
    },
    la: false,
  }
 },
 methods: {
  userInfo(){
    var result = UserAPI.MyAllInfo()
      // 获取响应结果 
      result.then((val)=>{
        console.log(val)
        if(val.success){
          console.log(val)
          this.userId=val.data.userId
          this.userName=val.data.userName
          this.userIcon=val.data.userIcon
          this.la=true
          // console.log(this.userDTO.userIcon);
        }else{
          console.log(val.errorMsg)
          alert(val.errorMsg)
      
        }
            })
  },
 }
}
</script>

<style scoped>
.la{
  text-align: center;
}

</style>